맨위로가기

웹 타이포그래피

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

웹 타이포그래피는 웹 페이지에서 글꼴을 사용하는 기술과 관련된 분야로, CSS의 `@font-face` 규칙을 통해 웹 폰트를 다운로드하여 사용할 수 있다. 초기에는 폰트 라이선스 문제와 브라우저 호환성 문제로 인해 어려움이 있었지만, EOT, TrueType, OpenType, WOFF 등의 다양한 폰트 형식과 구글 폰트와 같은 웹 폰트 서비스의 등장으로 발전했다. 웹 폰트는 웹 디자이너에게 중요한 도구가 되었으며, 성능 최적화를 위해 서브셋 및 동적 서브셋 기술이 사용된다. 웹 폰트 서비스는 다양한 글꼴을 제공하며, 사용 시 브라우저 설정 및 저작권 문제를 고려해야 한다.

더 읽어볼만한 페이지

  • 디지털 타이포그래피 - 점자
    점자는 루이 브라이유가 개발한 시각 장애인용 촉각 문자 체계로, 6점 점자를 사용하여 133개 이상의 언어에 적용되었으며, 교육, 정보 접근, 사회 참여에 필수적인 역할을 수행하지만 문해력 저하와 교육의 어려움이라는 과제도 안고 있다.
  • 디지털 타이포그래피 - 포스트스크립트
    어도비 시스템즈에서 개발한 포스트스크립트는 페이지 기술 언어이자 튜링 완전한 프로그래밍 언어로서, 데스크톱 출판 혁명을 이끌고 인쇄 기술 발전에 기여했으며, PDF 형식의 기반이 되었다.
  • 웹 디자인 - 웹 접근성
    웹 접근성은 장애가 있는 사람들이 웹을 사용할 수 있도록 기술 및 디자인 원칙을 적용하는 것이며, 웹 콘텐츠, 저작 도구, 사용자 에이전트의 접근성 향상을 위한 지침과 법률, 인공지능 기술 활용을 통한 접근성 개선 노력이 이루어지고 있다.
  • 웹 디자인 - 접근성
    접근성은 장애인을 포함한 모든 사람이 정보와 서비스에 차별 없이 접근하도록 보장하는 개념으로, 윤리적 책임, 사회적 형평성, 상업적 이익, 공익적 가치 때문에 중요하며, 물리적 환경, 정보 접근, 서비스 접근 등 다양한 영역에서 보조 기술과 적응 기술을 통해 구현되지만, 완전한 확보를 위해서는 지속적인 노력과 정책적 지원이 필요하다.
  • 월드 와이드 웹 - 구글
    구글은 래리 페이지와 세르게이 브린이 개발한 웹 검색 엔진에서 출발하여 검색 기술 혁신을 통해 유튜브, 안드로이드 등 다양한 서비스를 제공하는 세계적인 기술 기업으로 성장했지만, 개인정보보호 및 독점 논란에도 직면하고 있다.
  • 월드 와이드 웹 - 온라인 언론
    온라인 언론은 인터넷을 통해 뉴스 및 정보를 제공하며, 디지털 기술 발달과 함께 성장하여 시민 저널리즘 부상, 정보 전달 속도 혁신 등의 특징을 보이지만 정보 신뢰성 문제, 전통 언론 쇠퇴 등의 과제를 안고 있다.
웹 타이포그래피
웹 타이포그래피 개요
웹 타이포그래피 예시
웹 타이포그래피 예시
정의웹 페이지에서 타이포그래피를 구현하는 것
관련 요소글꼴 선택
글꼴 크기
자간
행간
색상
기타 스타일 속성
웹 폰트 기술
주요 기술@font-face 규칙
웹 폰트 서비스 (Google Fonts, Adobe Fonts 등)
가변 폰트 (Variable Fonts)
@font-face 규칙CSS를 사용하여 웹 서버에 있는 글꼴 파일을 다운로드하여 적용하는 방식
웹 폰트 서비스클라우드 기반으로 글꼴을 제공하고 웹 페이지에 쉽게 적용할 수 있도록 지원하는 서비스
가변 폰트하나의 글꼴 파일로 다양한 굵기, 너비, 기울기 등을 조절할 수 있는 기술
고려 사항
글꼴 선택사용 목적과 디자인 컨셉에 맞는 글꼴 선택
글꼴 라이선스 확인
성능글꼴 파일 크기 최적화
글꼴 로딩 방식 고려 (preload, font-display 등)
접근성충분한 글꼴 크기 확보
명확한 대비 (contrast) 유지
텍스트 기반 콘텐츠 제공
역사
초기 웹 타이포그래피제한적인 글꼴 사용 (웹 안전 글꼴)
이미지 기반 텍스트 사용
@font-face 도입웹 폰트 기술의 발전과 함께 다양한 글꼴 사용 가능
반응형 웹 디자인다양한 기기 환경에 최적화된 타이포그래피 구현
관련된 것
관련 기술CSS
HTML
JavaScript
관련 용어커닝
트래킹
레딩
추가 정보
참고 자료MDN Web Docs: CSS 글꼴
Google Fonts: Google Fonts

2. 역사

웹 브라우저는 초기에 단말기에 설치된 글꼴을 사용했기 때문에, 웹 디자이너가 의도한 글꼴이 사용자에게 제대로 표시되지 않는 문제가 있었다. 이를 해결하기 위해 글꼴을 이미지로 대체하기도 했지만, 이는 문서 수정 및 검색에 어려움을 초래했다.

이러한 문제를 해결하기 위해 등장한 기술이 '''웹 폰트'''이다. 웹 폰트는 웹 서버에 글꼴 파일을 저장해 두고, 웹 디자이너가 원하는 글꼴을 사용자에게 제공하는 기술이다. 한자와 같이 글자 수가 많은 경우 다운로드 용량 문제가 있었지만, 2010년대 이후 일본어 웹 폰트 서비스가 등장하고 구글 폰트에도 일본어 글꼴이 추가되면서 이러한 문제가 점차 해결되었다.[44][45][46][47]

2. 1. 초기 웹 환경과 글꼴 표현의 제약

웹 브라우저는 원래 단말기에 설치된 글꼴을 불러와 문자를 표시한다. 그러나 단말기에 해당 글꼴이 없으면 웹 디자이너가 의도하지 않은 대로 표시되어 글꼴 관련 웹 디자인에 제약이 있었다. 글꼴을 이미지로 표시하는 방법도 있었지만, 문서 수정 및 유지보수, 문서 검색 등에서 문제가 있었다.

그래서 웹 서버에 글꼴 파일을 두고 웹 디자이너가 의도하는 글꼴을 표시할 수 있도록 한 기술이 '''웹 폰트'''이다. 웹 서버에 놓이는 글꼴 자체를 웹 폰트라고 부르기도 하며, 글꼴을 웹에서 이용할 수 있도록 제공하는 서비스를 웹 폰트 서비스로 구분한다.

한자는 글자 수가 방대하여 웹 폰트 다운로드 용량 등에서 라틴 문자와 비교하여 어려움이 있었지만, 2010년, 2011년경부터 일본어에 대응하는 웹 폰트 서비스가 개설되었다.[44][45][46] 또한, 구글 폰트도 2014년경부터 일본어 글꼴이 추가되었다.[47]

2. 2. CSS1과 글꼴 속성

최초 CSS 사양에서[55] 개발자들은 일련의 속성을 통해 글꼴 속성을 지정하였다.

  • `font-family`
  • `font-style`
  • `font-variant`
  • `font-weight`
  • `font-size`


모든 글꼴은 이름으로만 식별되었다. 위의 속성 외에 디자이너는 글꼴에 스타일을 입히는 방법이 없었고, 클라이언트 시스템에 없는 글꼴을 선택할 수 있는 메커니즘도 존재하지 않았다.[2]

2. 3. 마이크로소프트의 Core fonts for the Web

마이크로소프트는 모든 웹 사용자가 기본적인 글꼴 세트를 갖도록 하기 위해 1996년 Core fonts for the Web 이니셔티브를 시작했다(2002년 종료). 배포된 글꼴에는 Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, Webdings 및 Verdana가 포함되었으며, 이 글꼴들은 자유롭게 배포할 수 있지만 사용에 대한 일부 권리를 제한하는 EULA에 따라 배포되었다.[3] 높은 보급률로 인해 웹 디자이너에게 필수적인 요소가 되었다. 그러나 대부분의 리눅스 배포판은 기본적으로 이러한 글꼴을 포함하지 않는다.

CSS2는 글꼴 합성, 향상된 글꼴 매칭 및 원격 글꼴 다운로드 기능을 추가하여 웹 개발자에게 제공되는 도구를 늘리려고 시도했다.[4] 일부 CSS2 글꼴 속성은 CSS2.1에서 제거되었고 나중에 CSS3에 포함되었다.[5]

2. 4. CSS2와 웹 폰트 기술의 등장

웹 폰트를 참조하고 자동으로 내려받는 기술은 최초로 CSS2 명세에 명시되었으며, 이는 `@font-face` 구문을 도입했다. 당시, 웹에서 폰트 파일을 가져오는 것은 특정 웹 페이지에서만 사용하도록 의도된 폰트가 폰트 라이선스를 위반하여 내려받아 설치될 수 있었기 때문에 논란의 대상이 되었다.[10]

마이크로소프트는 1997년 인터넷 익스플로러 4에 최초로 내려받을 수 있는 EOT 폰트에 대한 지원을 추가했다. 제작자는 각 페이지에 대해 부분 집합 폰트 파일을 생성하기 위해 독점적인 WEFT 도구를 사용해야 했다. EOT는 웹 폰트가 작동할 수 있음을 보여주었으며, 이 형식은 일반적인 운영 체제에서 지원하지 않는 문자 체계에서 일부 사용되었다. 그러나 이 형식은 널리 받아들여지지 않았고, 결국 W3C에서 거부되었다.[11]

2006년, 하콘 위움 리는 EOT 사용에 반대하는 캠페인을 시작했으며, 웹 브라우저가 일반적으로 사용되는 폰트 형식을 지원하도록 했다.[12][13][14] 그 이후로 일반적으로 사용되는 TrueType 및 OpenType 폰트 형식에 대한 지원이 사파리 3.1, 오페라 10, 모질라 파이어폭스 3.5 및 인터넷 익스플로러 9에 구현되었다.

2010년, TrueType 및 OpenType 폰트용 WOFF 압축 방식이 모질라 재단, 오페라 소프트웨어 및 마이크로소프트에 의해 W3C에 제출되었으며, 그 이후 브라우저에서 해당 형식을 지원하기 시작했다.[15][16][17]

구글 폰트는 오픈 소스 라이선스 하에 웹 폰트를 제공하기 위해 2010년에 출시되었다. 2016년까지 800개 이상의 웹 폰트 패밀리를 사용할 수 있게 되었다.[18]

웹 폰트는 웹 디자이너에게 중요한 도구가 되었으며, 2016년 기준으로 대부분의 사이트에서 웹 폰트를 사용하고 있다.[19]

한자는 방대한 수이므로, 웹 폰트의 내려받기 양 등, 라틴 문자와 비교하여 과제가 있었지만, 2010년, 2011년경부터 일본어에 대응하는 웹 폰트 서비스가 개설되었다.[44][45][46] 또한, 구글 폰트도 2014년경부터 일본어 글꼴이 추가되었다.[47]

2. 5. 일본어 웹 폰트 서비스의 등장 (2010년대)

웹 브라우저는 원래 단말기에 설치된 글꼴을 불러와 문자를 표시한다. 그러나 단말기에 해당 글꼴이 없으면 웹 디자이너가 의도하지 않은 대로 표시되어 웹 디자인에 제약이 있었다. 글꼴을 이미지로 표시하는 방법도 있지만, 문서 수정 및 유지보수, 문서 검색 등에서 문제가 있었다.

그래서 웹 서버에 글꼴 파일을 두고 웹 디자이너가 의도하는 글꼴을 표시할 수 있도록 한 기술이 '''웹 폰트'''이다. 웹 서버에 놓이는 글꼴 자체를 웹 폰트라고 부르기도 하며, 글꼴을 웹에서 이용할 수 있도록 제공하는 서비스를 웹 폰트 서비스라고 한다.

한자는 글자 수가 방대하여 웹 폰트의 다운로드 용량 등에서 라틴 문자에 비해 어려움이 있었다. 그러나 2010년, 2011년경부터 일본어에 대응하는 웹 폰트 서비스가 개설되었다[44][45][46]. 또한, 구글 폰트(Google Fonts)도 2014년경부터 일본어 글꼴이 추가되었다[47].

2. 6. 구글 폰트와 오픈 소스 웹 폰트 (2010년대)

웹 브라우저는 원래 단말기에 설치된 글꼴을 불러와 문자를 표시한다. 그러나 단말기에 해당 글꼴이 없으면 웹 디자이너가 의도하지 않은 대로 표시되어 글꼴 관련 웹 디자인에 제약이 있었다. 글꼴을 이미지로 표시하는 방법도 있지만, 문서 수정 및 유지보수, 문서 검색 등에서 문제가 있었다.

그래서 웹 서버에 글꼴 파일을 두고 웹 디자이너가 의도하는 글꼴을 표시할 수 있도록 한 기술이 '''웹 폰트'''이다. 웹 서버에 놓이는 글꼴 자체를 웹 폰트라고 부르기도 하며, 글꼴을 웹에서 이용할 수 있도록 제공하는 서비스를 웹 폰트 서비스로 구분한다.

한자는 글자 수가 방대하여 웹 폰트 다운로드 용량 등에서 라틴 문자와 비교해 어려움이 있었지만, 2010년, 2011년경부터 일본어 웹 폰트 서비스가 시작되었다.[44][45][46] 구글 폰트(Google Fonts)도 2014년경부터 일본어 글꼴이 추가되었다.[47]

3. 웹 폰트 기술 방식

웹 폰트 기술은 웹 페이지에서 다양한 글꼴을 사용할 수 있도록 해주는 중요한 기술이다.

CSS 명세는 여러 글꼴을 대체 글꼴로 지정하는 것을 허용한다.[6] CSS에서 `font-family` 속성을 사용하여 쉼표로 구분된 글꼴 목록을 지정할 수 있다.

```CSS

font-family: "Nimbus Sans L", Helvetica, Arial, sans-serif;

```

지정된 글꼴 중 가장 첫 번째 글꼴이 기본 글꼴로 사용된다. 만약 이 글꼴을 사용할 수 없으면 웹 브라우저는 목록의 다음 글꼴을 사용한다. 지정된 글꼴을 모두 사용할 수 없는 경우에는 브라우저의 기본 글꼴이 표시된다. 브라우저가 지정된 글꼴에 없는 문자를 표시할 때도 이와 같은 과정이 문자별로 진행된다.

웹 디자인 과정에서 웹 안전성이 보장되지 않는 글꼴을 사용하는 목업 디자인이 포함되는 경우가 종종 있다. 이러한 문제를 해결하기 위한 방법으로는 다음과 같은 것들이 있다.


  • 텍스트를 비슷한 웹 안전 글꼴로 대체하거나, 비슷한 모양의 대체 글꼴을 여러 개 지정한다.
  • 이미지 대체: 원하는 글꼴로 작성된 텍스트 이미지를 사용하여 텍스트를 덮어씌운다. 이 방법은 심미적으로는 좋지만, 텍스트 선택이 불가능하고 대역폭 사용량이 늘어나며, 검색 엔진 최적화에 불리하고, 장애가 있는 사용자의 접근성을 떨어뜨린다.
  • 과거에는 플래시 기반 솔루션인 sIFR이 사용되기도 했다. 이 방법은 이미지 대체 기술과 유사하지만 텍스트 선택이 가능하고 벡터로 렌더링된다는 장점이 있었다. 그러나 클라이언트 시스템에 플래시 플러그인이 필요하다는 단점이 있었다.
  • JavaScript를 사용하여 텍스트를 VML(인터넷 익스플로러용) 또는 SVG(다른 모든 브라우저용)로 변환하는 방법도 있다.[43]

3. 1. @font-face 규칙

특정 CSS의 `@font-face` 임베딩 기술[20]을 사용하면 IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+ 및 Chrome 4.0+에서 작동하도록 글꼴을 임베딩하는 것이 가능하다. 이를 통해 대다수의 웹 사용자가 이 기능에 접근할 수 있다. 일부 상업용 서체 회사는 글꼴의 재배포에 반대한다. 예를 들어, 호플러 앤 프레르-존스는 "디자이너가 온라인에서 안전하고 안정적으로 고품질 글꼴을 사용할 수 있는 더욱 표현력 있는 웹의 출현을 열정적으로 [지지]"하지만, `@font-face`를 사용하여 글꼴을 현재 제공하는 방식은 서체 회사에서 "불법 배포"로 간주하며 허용되지 않는다고 말한다.[21] 대신 호플러 앤 코.(Hoefler & Co.)는 클라우드 기반의 독점적인 글꼴 제공 시스템을 제공한다. 다른 많은 상업용 서체 회사는 웹 글꼴 라이선스라고 하는 특정 라이선스를 제공하여 글꼴의 재배포 문제를 해결한다. 이 라이선스는 기본 데스크톱 라이선스에서는 일반적으로 금지되는 웹에서 콘텐츠를 표시하기 위해 글꼴 소프트웨어를 사용할 수 있도록 허용한다. 물론 이는 무료 라이선스 하의 글꼴 및 서체에는 영향을 미치지 않는다.[22]

3. 2. 대체 글꼴 (Fallback fonts)

CSS 명세는 여러 글꼴을 대체 글꼴로 나열하는 것을 허용한다.[6] CSS에서 `font-family` 속성은 다음과 같이 쉼표로 구분된 글꼴 목록을 허용한다.

```CSS

font-family: "Nimbus Sans L", Helvetica, Arial, sans-serif;

```

가장 먼저 지정된 글꼴이 기본 설정 글꼴이다. 이 글꼴을 사용할 수 없는 경우 웹 브라우저는 목록의 다음 글꼴을 사용하려고 시도한다. 지정된 글꼴이 하나도 발견되지 않으면 브라우저는 기본 글꼴을 표시한다. 이와 동일한 과정은 브라우저가 지정된 글꼴에 없는 문자를 표시하려 할 때 문자별로 발생한다.

웹 디자인에서 흔히 겪는 어려움은 웹 안전성이 보장되지 않는 글꼴을 포함하는 목업 디자인이다. 이러한 상황에 대한 여러 가지 해결책이 있다. 한 가지 일반적인 해결책은 텍스트를 유사한 웹 안전 글꼴로 바꾸거나 일련의 유사한 모양의 대체 글꼴을 사용하는 것이다.

또 다른 기술은 ''이미지 대체''이다. 이 방법은 원하는 글꼴로 작성된 동일한 텍스트가 포함된 이미지로 텍스트를 덮어씌우는 것을 포함한다. 이는 미적인 목적에는 좋지만 텍스트 선택을 방지하고 대역폭 사용량을 늘리며, 검색 엔진 최적화에 좋지 않고, 장애가 있는 사용자가 접근하기 어렵게 만든다.

과거에는 플래시 기반 솔루션인 sIFR이 사용되었다. 이는 이미지 대체 기술과 유사하지만 텍스트를 선택할 수 있고 벡터로 렌더링된다는 차이점이 있다. 그러나 이 방법은 클라이언트 시스템에 독점 플러그인이 있어야 한다.

또 다른 해결책은 JavaScript를 사용하여 텍스트를 VML (인터넷 익스플로러용) 또는 SVG (다른 모든 브라우저용)로 바꾸는 것이다.[43]

4. 웹 폰트 파일 형식

웹 폰트는 다양한 파일 형식으로 제공되며, 각 형식은 개발 배경, 지원 브라우저, 기능 등이 다르다.

4. 1. EOT (Embedded OpenType)

마이크로소프트는 1997년 인터넷 익스플로러 4에 최초로 다운로드 가능한 EOT 폰트에 대한 지원을 추가했다.[11] 제작자는 각 페이지에 대해 부분 집합 폰트 파일을 생성하기 위해 독점적인 WEFT 도구를 사용해야 했다. EOT는 웹 폰트가 작동할 수 있음을 보여주었으며, 이 형식은 일반적인 운영 체제에서 지원하지 않는 문자 체계에서 일부 사용되었다. 그러나 이 형식은 널리 받아들여지지 않았고, 결국 W3C에서 거부되었다.[11]

2006년, 하콘 위움 리는 EOT 사용에 반대하는 캠페인을 시작했으며, 웹 브라우저가 일반적으로 사용되는 폰트 형식을 지원하도록 했다.[12][13][14]

인터넷 익스플로러는 버전 4.0부터 독점적인 임베디드 오픈타입 표준을 통해 글꼴 임베딩을 지원해 왔다. 이는 디지털 저작권 관리 기술을 사용하여 글꼴이 라이선스 없이 복사되어 사용되는 것을 방지한다. EOT의 단순화된 하위 집합은 CWT(Compatibility Web Type, 이전의 EOT-Lite)라는 이름으로 정식화되었다.

4. 2. TrueDoc

TrueDoc는 웹 폰트 명세는 아니었지만, 폰트 임베딩을 위한 최초의 표준이었다. 1994년 활자 주조 회사 비트스트림에서 개발했으며, 1996년 넷스케이프 내비게이터 4에서 기본적으로 지원되었다. 넷스케이프가 비트스트림의 소스 코드를 공개할 수 없는 오픈 소스 라이선스 제한으로 인해 넷스케이프 내비게이터 6가 출시되면서 이 기술에 대한 기본 지원이 종료되었다.[23] 액티브X 플러그인을 통해 인터넷 익스플로러에 TrueDoc 지원을 추가할 수 있었지만, 이 기술은 4.0 버전부터 인터넷 익스플로러 브라우저에서 기본적으로 지원된 마이크로소프트의 임베디드 오픈타입 폰트와 경쟁해야 했다.[23] 또 다른 장애물은 TrueDoc 형식의 웹 폰트를 생성할 수 있는 오픈 소스 또는 무료 도구가 부족했던 반면, 마이크로소프트는 자사 형식의 웹 폰트를 생성할 수 있는 무료 웹 임베딩 폰트 도구를 제공했다는 점이다.

4. 3. TTF/OTF (TrueType/OpenType)

2006년, 하콘 위움 리는 EOT 사용에 반대하는 캠페인을 시작했으며, 웹 브라우저가 일반적으로 사용되는 폰트 형식을 지원하도록 했다.[12][13][14] 그 이후로 일반적으로 사용되는 트루타입 및 오픈타입 폰트 형식에 대한 지원이 사파리 3.1, 오페라 10, 모질라 파이어폭스 3.5 및 인터넷 익스플로러 9에 구현되었다.

업계 표준인 트루타입(TTF) 및 오픈타입(TTF/OTF) 글꼴 연결은 모질라 파이어폭스 3.5+, 오페라 10+,[33] 사파리 3.1+,[34] 구글 크롬 4.0+에서 지원된다.[35] 인터넷 익스플로러 9+는 설치 가능으로 설정된 글꼴 포함 권한이 있는 글꼴만 지원한다.[36]

4. 4. WOFF/WOFF2 (Web Open Font Format)

웹 오픈 폰트 형식(WOFF)은 기본적으로 압축과 추가 메타데이터가 포함된 OpenType 또는 TrueType 형식이다. 2010년, 모질라 재단, 오페라 소프트웨어, 마이크로소프트는 TrueType 및 OpenType 폰트용 WOFF 압축 방식을 W3C에 제출했으며, 그 이후 브라우저에서 해당 형식을 지원하기 시작했다.[15][16][17]

WOFF를 지원하는 주요 브라우저는 다음과 같다.

4. 5. SVG Fonts

웹 타이포그래피는 두 가지 방식으로 SVG에 적용된다.

1. Scalable Vector Graphics 1.1 사양의 모든 버전(SVGT 하위 집합 포함)은 SVG 문서 내에서 글꼴을 생성할 수 있는 글꼴 모듈을 정의한다. 사파리는 버전 3에서 이러한 속성 중 다수를 지원하기 시작했다. 오페라는 버전 8.0에서 예비 지원을 추가했으며, 버전 9.0에서는 더 많은 속성을 지원한다.

2. SVG 사양은 CSS가 HTML 문서와 유사한 방식으로 SVG 문서에 적용되도록 하며, `@font-face` 규칙은 SVG 문서의 텍스트에 적용될 수 있다. 오페라는 버전 10에서 이를 지원하기 시작했으며,[25] WebKit은 버전 325부터 SVG 글꼴만을 사용하여 이 방식을 지원한다.

SVG 글꼴은 SVG 그래픽을 사용한 글꼴의 W3C 표준으로, OpenType 글꼴의 하위 집합이 되었다.[26] 다색[27] 또는 애니메이션 글꼴을 허용했다.[28] 처음에는 SVG 1.1 사양의 하위 집합이었지만,[29] SVG 2.0 사양에서는 더 이상 사용되지 않는다.[30] 독립적인 형식으로서의 SVG 글꼴은 IE와 Firefox를 제외한 대부분의 브라우저에서 지원되었으며, Chrome(및 Chromium)에서는 더 이상 사용되지 않는다.[31] 이제 일반적으로 더 이상 사용되지 않으며, 대부분의 브라우저 공급업체가 동의한 표준은 SVGOpenTypeFonts라고 불리는 OpenType(그리고 WOFF 상위 집합)에 포함된 SVG 글꼴 하위 집합이다.[32] Firefox는 Firefox 26부터 SVG OpenType을 지원해왔다.

5. 유니코드와 웹 폰트

유니코드 글꼴은 글리프를 유니코드 표준에 정의된 코드 포인트에 매핑하는 컴퓨터 글꼴이다.[42] 현대 컴퓨터 글꼴 대다수는 유니코드 매핑을 사용하기 때문에 이 용어는 중복된 용어가 되었다. 단일 문자 체계의 글리프만 포함하거나 기본 라틴 알파벳만 지원하는 글꼴도 마찬가지다. 광범위한 유니코드 스크립트 및 유니코드 기호를 지원하는 글꼴은 때때로 "범유니코드 글꼴"이라고 불리지만, TrueType 글꼴에서 정의할 수 있는 최대 글리프 수가 65,535개로 제한되어 있어 단일 글꼴이 정의된 모든 유니코드 문자에 대한 개별 글리프를 제공하는 것은 불가능하다.

Windows 플랫폼에서 기본적으로 사용 가능한 글꼴 중에는 Microsoft Sans Serif와 Lucida Sans Unicode 두 글꼴이 광범위한 유니코드 문자 목록을 제공한다. 리눅스와 같은 자유-오픈 소스 소프트웨어 플랫폼에서는 GNU Unifont 및 GNU FreeFont가 광범위한 문자를 제공한다. ChromeOS에서 구글의 Noto fonts는 유니코드 표준에 인코딩된 모든 스크립트를 지원하거나 지원할 예정이다.

5. 1. 유니코드 글꼴

유니코드 글꼴은 글리프를 유니코드 표준에 정의된 코드 포인트에 매핑하는 컴퓨터 글꼴이다.[42] 현대 컴퓨터 글꼴 대다수는 유니코드 매핑을 사용하기 때문에 이 용어는 중복된 용어가 되었다. 심지어 단일 문자 체계의 글리프만 포함하거나 기본 라틴 알파벳만 지원하는 글꼴도 마찬가지다. 광범위한 유니코드 스크립트 및 유니코드 기호를 지원하는 글꼴은 때때로 "범유니코드 글꼴"이라고 불리지만, TrueType 글꼴에서 정의할 수 있는 최대 글리프 수가 65,535개로 제한되어 있어 단일 글꼴이 정의된 모든 유니코드 문자에 대한 개별 글리프를 제공하는 것은 불가능하다.

Windows 플랫폼에서 기본적으로 사용 가능한 글꼴 중 Microsoft Sans Serif와 Lucida Sans Unicode의 두 글꼴만 광범위한 유니코드 문자 목록을 제공한다.

리눅스와 같은 자유-오픈 소스 소프트웨어 플랫폼에서 GNU Unifont 및 GNU FreeFont는 광범위한 문자를 제공한다. ChromeOS에서 구글의 Noto fonts는 유니코드 표준에 인코딩된 모든 스크립트를 지원하거나 지원할 예정이다.

5. 2. 범유니코드 글꼴

유니코드 글꼴은 글리프를 유니코드 표준에 정의된 코드 포인트에 매핑하는 컴퓨터 글꼴이다.[42] 현대 컴퓨터 글꼴의 대다수가 유니코드 매핑을 사용하기 때문에 이 용어는 중복된 용어가 되었다. 단일 문자 체계의 글리프만 포함하거나 기본 라틴 알파벳만 지원하는 글꼴도 마찬가지다. 광범위한 유니코드 스크립트 및 유니코드 기호를 지원하는 글꼴은 때때로 "범유니코드 글꼴"이라고 불리지만, TrueType 글꼴에서 정의할 수 있는 최대 글리프 수가 65,535개로 제한되어 있어 단일 글꼴이 정의된 모든 유니코드 문자에 대한 개별 글리프를 제공하는 것은 불가능하다.

Windows 플랫폼에서 기본적으로 사용 가능한 글꼴 중 Microsoft Sans Serif와 Lucida Sans Unicode의 두 글꼴만 광범위한 유니코드 문자 목록을 제공한다.

리눅스와 같은 자유-오픈 소스 소프트웨어 플랫폼에서 GNU Unifont 및 GNU FreeFont는 광범위한 문자를 제공한다. ChromeOS에서 구글의 Noto fonts는 유니코드 표준에 인코딩된 모든 스크립트를 지원하거나 지원할 예정이다.

6. 웹 폰트와 성능 최적화

웹 폰트는 편리하지만, 폰트 파일 크기가 커서 웹 페이지 로딩 속도를 늦출 수 있다는 단점이 있다. 특히 한글은 영어와 달리 글자 수가 많아 폰트 파일 크기가 더 크다. 따라서 웹 페이지 로딩 속도를 높이기 위해 폰트 파일 크기를 줄이는 다양한 방법들이 사용된다.

웹 폰트의 성능을 최적화하는 방법으로는 폰트의 서브셋과 동적 서브셋 등이 있다.

6. 1. 서브셋 (Subset)

페이지 로딩 속도를 높이기 위해 폰트 파일 크기를 줄여야 할 필요가 있으며, 필요한 글자만 포함하는 폰트의 서브셋(폰트를 일부 문자 수로 제한한 것)을 만들 수 있다. 이를 서브셋화라고 한다.

6. 2. 동적 서브셋 (Dynamic Subsetting)

일본어나 중국어와 같은 언어는 문자가 많기 때문에 원래 글꼴에 포함된 모든 문자를 합치면 수 메가바이트의 용량에 달한다. 이 때문에 서브세트 작성을 동적으로 수행하는 기술이 사용되며, 이를 동적 서브세팅이라고 한다. 동적 서브세팅은 웹사이트에서 실행되는 자바스크립트로, 페이지 내에서 사용되는 모든 문자를 감지하여 필요한 문자를 서브세트로 서버에서 호출하는 방식이다.

어도비 타입킷(Adobe Typekit)이나 타입스퀘어(TypeSquare)에서 이 기술을 채용하고 있다.

7. 웹 폰트 서비스

웹 브라우저는 원래 단말기에 설치된 글꼴을 호출하여 문자를 표시한다. 그러나 단말기에 해당 글꼴이 없으면 웹 디자이너가 의도하지 않은 글꼴로 표시되어 웹 디자인에 제약이 있었다. 글꼴을 이미지로 표시하는 방법도 있었지만, 문서 수정 및 유지보수, 검색 등에 문제가 있었다.

그래서 웹 서버에 글꼴 파일을 두고 웹 디자이너가 의도하는 글꼴을 표시할 수 있도록 한 기술이 '''웹 폰트'''이다. 웹 서버에 놓이는 글꼴 자체를 웹 폰트라고 부르기도 하며, 글꼴을 웹에서 이용할 수 있도록 제공하는 서비스를 웹 폰트 서비스라고 한다.

한자는 글자 수가 방대하여 라틴 문자에 비해 웹 폰트 다운로드 용량이 커지는 문제가 있었다. 그러나 2010년, 2011년경부터 일본어 웹 폰트 서비스가 개설되기 시작했다.[44][45][46] 구글 폰트(Google Fonts)도 2014년경부터 일본어 글꼴을 추가했다.[47]

다음은 주요 웹 폰트 서비스 목록이다.


  • 구글 폰트
  • 어도비 폰트(Adobe Fonts)
  • 어도비 엣지 웹 폰트(Adobe Edge Web Fonts)
  • 타입스퀘어 - 모리사와와 타입뱅크의 일본어 웹 폰트가 유료로 제공된다. MORISAWA PASSPORT에도 이용권이 포함되어 있다.
  • FONTPLUS - 폰트웍스, 이와타, 모토야, 하쿠슈 서체, 모리사와(モリサワ)의 일본어 웹 폰트가 유료로 제공된다.
  • 다이나폰트 온라인 - 다이나콤웨어가 제공하는 유료 일본어 웹 폰트 서비스. 일본어 외에 중국어 간체자, 번체자도 제공된다. 2019년 4월 이후에는 동사의 "DynaSmart" 시리즈에 이용권이 포함되는 형태로 변경되었다.
  • REALTYPE - 자체 제작한 폰트를 등록하여 웹 폰트로 판매, 이용할 수 있는 웹 폰트 플랫폼.
  • FontStream - 타입 랩(タイプラボ), 킨키도(欣喜堂) 등의 일본어 웹 폰트가 유료로 제공된다.
  • 웹 폰트 팬 - 일본어 웹 폰트, 워드프레스용 폰트 플러그인이 유료로 제공된다.
  • 모지데파
  • WebLiFE 서버
  • Fontdeck
  • Fonts.com
  • Fontspring
  • Font Squirrel

8. 웹 폰트 사용 시 고려 사항

웹 폰트를 사용할 때 브라우저 설정에 따라 폰트가 표시되지 않을 수 있음을 고려해야 한다.

8. 1. 브라우저 설정

브라우저에서 "웹사이트에서 지정한 글꼴을 사용하지 않음" 설정을 켜거나 사용자 스타일 시트를 사용하면, 웹 폰트가 제대로 표시되지 않을 수 있다. 특히 아이콘 폰트처럼 사용자의 컴퓨터에 대체할 글꼴이 없는 경우에는 이 문제가 더 심각하게 나타난다.

참조

[1] 웹사이트 Embedded Fonts In Microsoft IE4pr2 http://browserwatch.[...] Internet.com 1997-09-02
[2] 간행물 Cascading Style Sheets, level 1 http://www.w3.org/TR[...] W3C 1996-12-17
[3] 간행물 Fonts http://www.w3.org/TR[...] World Wide Web Consortium 2009-07-28
[4] 간행물 CSS2.1 Changes —C.2.97 Chapter 15 Fonts http://www.w3.org/TR[...] World Wide Web Consortium 2010-01-30
[5] 간행물 CSS3 module: Web Fonts http://www.w3.org/TR[...] World Wide Web Consortium 2010-01-30
[6] 간행물 CSS2 specification http://www.w3.org/TR[...] World Wide Web Consortium
[7] 웹사이트 Which Are More Legible: Serif or Sans Serif Typefaces? http://alexpoole.inf[...] 2017-09-27
[8] 웹사이트 CSS Fonts Module Level 4 https://www.w3.org/T[...] 2024-02-01
[9] 웹사이트 Ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for font-family {{pipe}} Can I use... Support tables for HTML5, CSS3, etc https://caniuse.com/[...]
[10] 간행물 Font Embedding on the Web http://blogs.msdn.co[...] Microsoft 2008-07-21
[11] 문서 W3C team comment http://www.w3.org/Su[...]
[12] 뉴스 Microsoft's forgotten monopoly https://www.cnet.com[...]
[13] 문서 Web fonts: the view from the free world http://people.opera.[...]
[14] 문서 CSS @ Ten: The Next Big Thing http://www.alistapar[...]
[15] 문서 WOFF File Format 1.0 Submission Request to W3C http://www.w3.org/Su[...]
[16] 간행물 Meet WOFF, The Standard Web Font Format http://blogs.msdn.co[...] Microsoft 2010-04-23
[17] 간행물 WOFF conversion reference code https://people.mozil[...] 2016-05-08
[18] 뉴스 The new Google Fonts database is a design geek's paradise https://www.theverge[...] 2016-08-24
[19] 문서 Webfonts on the Prairie https://alistapart.c[...] Alist Apart 2016-09-06
[20] 간행물 xBrowser Fonts — Expand Your Font Palette Using CSS3 http://randsco.com/i[...] 2010-02-05
[21] 웹사이트 Geek Meet: Web Typography and sIFR 3 - Slide 15 and 16 http://www.slideshar[...] SlideShare 2010-03-17
[22] 문서 Open-source typefaces
[23] 서적 Web design in a nutshell: a desktop quick reference https://archive.org/[...] O'Reilly 2016-03-20
[24] 간행물 EOT-Lite File Format v.1.1 http://lists.w3.org/[...] World Wide Web Consortium 2010-01-30
[25] 간행물 Opera Presto 2.2 and Opera 10 — a first look http://dev.opera.com[...] Opera Software 2010-01-30
[26] 간행물 SVG in OpenType http://www.w3.org/20[...] W3C 2014-09-20
[27] 간행물 Colorful typography on the web: get ready for multicolor fonts http://pixelambacht.[...] Pixel Ambacht 2014-09-20
[28] 간행물 Anymated Glyph Example https://people.mozil[...] people.Mozilla 2014-09-20
[29] 간행물 Fonts http://www.w3.org/TR[...] W3C 2014-09-20
[30] 간행물 Fonts chapter https://www.w3.org/T[...] W3C 2018-03-08
[31] 간행물 Can I Use SVG fonts http://caniuse.com/s[...] CanIuse 2014-09-20
[32] 간행물 SVGOpenTypeFonts https://wiki.mozilla[...] Mozilla 2014-09-20
[33] 간행물 Opera Presto 2.2 and Opera 10 — a first look http://www.opera.com[...] Opera Developer Community 2010-01-29
[34] 간행물 Apple's Safari 3.1 to support downloadable web fonts, more http://www.appleinsi[...] AppleInsider 2010-02-05
[35] 간행물 Chrome and @font-face: It's here! http://paulirish.com[...] 2010-01-25
[36] 간행물 The CSS Corner: Better Web Typography For Better Design http://blogs.msdn.co[...] Microsoft 2010-07-15
[37] 간행물 Mozilla Supports Web Open Font Format http://blog.mozilla.[...] Mozilla 2010-02-05
[38] 간행물 Google Chrome to Support the Web Open Font Format http://www.webmonkey[...] webmonkey 2010-04-26
[39] 간행물 Bug 38217 - {{Bracket|chromium}} Add WOFF support https://bugs.webkit.[...] WebKit
[40] 간행물 Web specifications support in Opera Presto 2.7 http://www.opera.com[...] Opera
[41] 간행물 Meet WOFF, The Standard Web Font Format http://blogs.msdn.co[...] Microsoft 2010-04-23
[42] 웹사이트 Fonts and keyboards https://www.unicode.[...] Unicode Consortium 2019-10-13
[43] Github About Cufon https://github.com/s[...]
[44] 웹사이트 国内初の日本語対応ウェブフォントサービス「デコもじ」を開始ウェブフォント関連事業に本格参入 https://ascii.jp/ele[...] Ascii.jp 2013-04-10
[45] 웹사이트 ソフトバンク・テクノロジー社の「フォントプラス」がフォントワークス書体に対応 http://fontworks.co.[...] フォントワークス 2013-02-11
[46] 웹사이트 クラウドフォントサービス「TypeSquare（仮称）」を発表 http://www.morisawa.[...] モリサワ 2013-02-11
[47] 웹사이트 Web担当者Forum 編集長ブログ グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ http://web-tan.forum[...] 2015-03-10
[48] 간행물 Mozilla Supports Web Open Font Format http://blog.mozilla.[...] Mozilla 2010-02-05
[49] 간행물 Google Chrome to Support the Web Open Font Format http://www.webmonkey[...] webmonkey 2010-04-26
[50] 간행물 Bug 38217 - {{Bracket|chromium}} Add WOFF support https://bugs.webkit.[...] WebKit
[51] 간행물 Web specifications support in Opera Presto 2.7 http://www.opera.com[...] Opera
[52] 간행물 Meet WOFF, The Standard Web Font Format http://blogs.msdn.co[...] Microsoft 2010-04-23
[53] 웹사이트 日本のお客様へ。日本および東アジアのWebフォントへの対応と新しいフォント選択ツールに関するお知らせ。 https://blog.typekit[...] 2024-02-05
[54] 웹인용 Embedded Fonts In Microsoft IE4pr2 http://browserwatch.[...] Internet.com 1997-09-02
[55] 인용 Cascading Style Sheets, level 1 http://www.w3.org/TR[...] W3C 1996-12-17


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com